<template>
  <div class="hotel-list-page">
    <!-- 顶部搜索区域 -->
    <el-card class="search-card">
      <div class="search-header">
        <span class="tab active">预订酒店</span>
        <span class="tab">HOTEL</span>
      </div>
      <el-form :model="searchForm" label-position="top" class="search-form-layout">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="目的地/酒店名称">
              <el-input v-model="searchForm.destination" placeholder="上海" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入住">
              <el-date-picker
                v-model="searchForm.checkInDate"
                type="date"
                placeholder="6月15日 (今天)"
                :disabled-date="disabledDate"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房间及住客">
              <el-select v-model="searchForm.roomGuest" placeholder="1间, 1位" style="width: 100%;">
                <el-option label="1间, 1位" value="1-1" />
                <el-option label="1间, 2位" value="1-2" />
                <el-option label="2间, 2位" value="2-2" />
                <el-option label="2间, 4位" value="2-4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="酒店级别">
              <el-select v-model="searchForm.starLevel" placeholder="不限" clearable style="width: 100%;">
                <el-option label="经济型" value="1" />
                <el-option label="舒适型" value="2" />
                <el-option label="高档型" value="3" />
                <el-option label="豪华型" value="4" />
                <el-option label="奢华型" value="5" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关键词 (选填)">
              <el-input v-model="searchForm.keyword" placeholder="机场/火车站/酒店名称..." clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="handleSearch" class="search-button">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div class="safe-tip">
        <span>安心订</span><el-icon><SuccessFilled /></el-icon>
        <span>放心住</span><el-icon><CircleCheckFilled /></el-icon>
      </div>
    </el-card>

    <!-- 促销横幅 -->
    <div class="promo-banner">
      <img src="https://picsum.photos/id/1069/1200/200" alt="促销横幅" />
    </div>

    <el-row :gutter="20" class="content-area">
      <el-col :span="18">
        <!-- 旅游地图区域 -->
        <el-card class="map-card">
          <div class="map-header">
            <el-icon><LocationFilled /></el-icon> 旅游地图
          </div>
          <div class="map-placeholder"></div>
          <div class="map-actions">
            <span>探索 • 好去处</span><el-icon><ArrowRight /></el-icon>
          </div>
        </el-card>

        <!-- 酒店推荐列表 -->
        <el-card class="recommendation-card">
          <div class="card-header">
            <h3>酒店推荐</h3>
            <div class="header-tabs">
              <span
                v-for="city in recommendedCities"
                :key="city"
                :class="{ active: activeCity === city }"
                @click="activeCity = city"
              >
                {{ city }}
              </span>
              <span class="more-cities">更多 <el-icon><ArrowDown /></el-icon></span>
            </div>
          </div>
          <el-row :gutter="20" class="hotel-recommendations">
            <el-col :span="8" v-for="hotel in paginatedHotels" :key="hotel.id">
              <el-card shadow="hover" class="hotel-item" @click="viewHotelDetail(hotel.id)">
                <img :src="hotel.imageUrl" class="hotel-image" />
                <div class="hotel-info">
                  <h4>{{ hotel.name }}</h4>
                  <div class="rating-stars">
                    <el-rate v-model="hotel.rating" disabled score-template="" />
                    <span class="review-count">{{ hotel.reviewCount }}条点评</span>
                  </div>
                  <div class="price-info">
                    <span class="original-price" v-if="hotel.originalPrice">¥{{ hotel.originalPrice }}</span>
                    <span class="current-price">¥{{ hotel.currentPrice }}</span>
                    <span class="unit">/晚</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!-- 分页 -->
          <div class="pagination-block">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="totalHotels"
              :page-sizes="[6, 12, 18]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <!-- 右侧酒店口碑榜 -->
        <el-card class="right-sidebar-card">
          <div class="sidebar-header">
            <el-icon><TrophyBase /></el-icon> 杭州酒店口碑榜
          </div>
          <ul class="hotel-ranking-list">
            <li v-for="rankHotel in topHotels" :key="rankHotel.id" class="ranking-item">
              <img :src="rankHotel.image" class="ranking-image" />
              <div class="ranking-info">
                <p class="ranking-name">{{ rankHotel.name }}</p>
                <p class="ranking-price">¥{{ rankHotel.price }}起</p>
              </div>
            </li>
          </ul>
        </el-card>

        <!-- 携程口碑榜广告 -->
        <el-card class="right-sidebar-card marketing-card">
          <img src="https://picsum.photos/id/1070/300/150" alt="携程口碑榜" class="marketing-image" />
          <p class="marketing-text">四亿旅行者的口碑之选 ></p>
        </el-card>

        <!-- 携程商旅广告 -->
        <el-card class="right-sidebar-card marketing-card">
          <img src="https://picsum.photos/id/1071/300/100" alt="携程商旅" class="marketing-image small-image" />
          <p class="marketing-text">携程集团旗下 一站式企业差旅服务平台</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  SuccessFilled,
  CircleCheckFilled,
  LocationFilled,
  ArrowRight,
  ArrowDown,
  TrophyBase
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 搜索表单
const searchForm = ref({
  destination: '上海',
  checkInDate: new Date(),
  checkOutDate: new Date(new Date().setDate(new Date().getDate() + 1)), // 默认明天
  roomGuest: '1-1',
  starLevel: '',
  keyword: '',
})

// 模拟推荐城市
const recommendedCities = ref(['上海', '北京', '广州', '三亚'])
const activeCity = ref('上海')

// 模拟酒店数据
const mockHotels = [
  {
    id: 1,
    name: '上海虹桥国家会展中心同...',
    rating: 4.5,
    reviewCount: 1295,
    originalPrice: 393,
    currentPrice: 345,
    imageUrl: 'https://picsum.photos/id/237/300/200',
    location: '上海',
  },
  {
    id: 2,
    name: '上海陆家嘴金融中心桔子...',
    rating: 4.8,
    reviewCount: 4840,
    originalPrice: 646,
    currentPrice: 607,
    imageUrl: 'https://picsum.photos/id/238/300/200',
    location: '上海',
  },
  {
    id: 3,
    name: '上海Tyms服务式公寓',
    rating: 4.6,
    reviewCount: 86,
    originalPrice: 1203,
    currentPrice: 1058,
    imageUrl: 'https://picsum.photos/id/239/300/200',
    location: '上海',
  },
  {
    id: 4,
    name: '广州塔江景酒店',
    rating: 4.7,
    reviewCount: 987,
    originalPrice: 789,
    currentPrice: 720,
    imageUrl: 'https://picsum.photos/id/240/300/200',
    location: '广州',
  },
  {
    id: 5,
    name: '北京故宫附近酒店',
    rating: 4.3,
    reviewCount: 1500,
    originalPrice: 550,
    currentPrice: 499,
    imageUrl: 'https://picsum.photos/id/241/300/200',
    location: '北京',
  },
  {
    id: 6,
    name: '三亚湾海景度假酒店',
    rating: 4.9,
    reviewCount: 2300,
    originalPrice: 1500,
    currentPrice: 1350,
    imageUrl: 'https://picsum.photos/id/242/300/200',
    location: '三亚',
  },
  {
    id: 7,
    name: '杭州西湖边酒店',
    rating: 4.6,
    reviewCount: 900,
    originalPrice: 850,
    currentPrice: 780,
    imageUrl: 'https://picsum.photos/id/243/300/200',
    location: '杭州',
  },
  {
    id: 8,
    name: '深圳湾万丽酒店',
    rating: 4.7,
    reviewCount: 1100,
    originalPrice: 980,
    currentPrice: 890,
    imageUrl: 'https://picsum.photos/id/244/300/200',
    location: '深圳',
  },
  {
    id: 9,
    name: '成都熊猫主题酒店',
    rating: 4.5,
    reviewCount: 750,
    originalPrice: 420,
    currentPrice: 380,
    imageUrl: 'https://picsum.photos/id/245/300/200',
    location: '成都',
  },
]

const hotels = computed(() => {
  // 模拟根据activeCity过滤酒店
  return mockHotels.filter(hotel => {
    if (activeCity.value === '上海') return hotel.location === '上海'
    if (activeCity.value === '北京') return hotel.location === '北京'
    if (activeCity.value === '广州') return hotel.location === '广州'
    if (activeCity.value === '三亚') return hotel.location === '三亚'
    return true
  })
})

const currentPage = ref(1)
const pageSize = ref(6) // 每页显示6个酒店

const totalHotels = computed(() => hotels.value.length)

const paginatedHotels = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return hotels.value.slice(start, end)
})

// 模拟右侧口碑榜酒店数据
const topHotels = ref([
  {
    id: 1,
    name: '杭州康莱德酒店',
    price: 1379,
    image: 'https://picsum.photos/id/246/100/70',
  },
  {
    id: 2,
    name: '杭州君悦酒店',
    price: 1366,
    image: 'https://picsum.photos/id/247/100/70',
  },
  {
    id: 3,
    name: '杭州绿城尊蓝钱...',
    price: 1050,
    image: 'https://picsum.photos/id/248/100/70',
  },
])

const handleSearch = () => {
  // 模拟搜索逻辑，这里不做实际过滤，仅提示
  ElMessage.success('搜索功能待完善')
}

const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7 // 禁用今天之前的日期
}

const viewHotelDetail = (hotelId) => {
  // 跳转到酒店详情页，目前没有详情页，只做提示
  ElMessage.info(`查看酒店ID: ${hotelId} 详情 (功能待完善)`)
  // router.push(`/credit/hotel/${hotelId}`)
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1 // 切换每页大小后回到第一页
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

onMounted(() => {
  // 可以在这里加载真实的酒店数据
})
</script>

<style lang="scss" scoped>
.hotel-list-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  .search-header {
    background-color: #f6f6f6;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    .tab {
      display: inline-block;
      padding: 5px 15px;
      font-size: 16px;
      cursor: pointer;
      color: #666;
      &.active {
        font-weight: bold;
        color: #333;
        border-bottom: 2px solid #409eff;
      }
    }
  }
  .search-form-layout {
    padding: 20px;
    .el-form-item {
      margin-bottom: 15px;
      label {
        font-size: 14px;
        color: #666;
      }
    }
    .search-button {
      width: 100%;
      height: 40px;
      font-size: 18px;
      margin-top: 10px;
      background-color: #409eff;
      border-color: #409eff;
    }
  }
  .safe-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    background-color: #e6f7ff;
    color: #409eff;
    font-size: 14px;
    .el-icon {
      margin-right: 5px;
    }
  }
}

.promo-banner {
  margin-bottom: 20px;
  img {
    width: 100%;
    border-radius: 8px;
    display: block;
  }
}

.content-area {
  .map-card {
    margin-bottom: 20px;
    border-radius: 8px;
    .map-header {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      .el-icon {
        margin-right: 8px;
        color: #409eff;
      }
    }
    .map-placeholder {
      width: 100%;
      height: 200px; /* 模拟地图高度 */
      background-color: #e0e0e0; /* 灰色背景模拟地图 */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 16px;
      border-radius: 4px;
      margin-bottom: 10px;
      &::before {
        content: '地图占位符';
      }
    }
    .map-actions {
      text-align: right;
      font-size: 14px;
      color: #409eff;
      cursor: pointer;
      .el-icon {
        margin-left: 5px;
      }
    }
  }

  .recommendation-card {
    border-radius: 8px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      h3 {
        margin: 0;
        font-size: 20px;
        color: #333;
      }
      .header-tabs {
        span {
          margin-left: 15px;
          font-size: 14px;
          color: #666;
          cursor: pointer;
          &.active {
            color: #409eff;
            font-weight: bold;
          }
          &.more-cities {
            color: #409eff;
          }
        }
      }
    }

    .hotel-recommendations {
      .el-col {
        margin-bottom: 20px;
      }
      .hotel-item {
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }
        .hotel-image {
          width: 100%;
          height: 180px;
          object-fit: cover;
          display: block;
        }
        .hotel-info {
          padding: 15px;
          h4 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 16px;
            color: #333;
          }
          .rating-stars {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            .el-rate {
              height: auto;
            }
            .review-count {
              font-size: 12px;
              color: #999;
              margin-left: 5px;
            }
          }
          .price-info {
            margin-top: 10px;
            display: flex;
            align-items: baseline;
            .original-price {
              text-decoration: line-through;
              color: #999;
              font-size: 14px;
              margin-right: 5px;
            }
            .current-price {
              color: #ff5722; /* 橙色 */
              font-size: 20px;
              font-weight: bold;
            }
            .unit {
              font-size: 12px;
              color: #666;
              margin-left: 3px;
            }
          }
        }
      }
    }
    .pagination-block {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .right-sidebar-card {
    margin-bottom: 20px;
    border-radius: 8px;
    .sidebar-header {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      .el-icon {
        margin-right: 8px;
        color: #e6a23c;
      }
    }
    .hotel-ranking-list {
      list-style: none;
      padding: 0;
      margin: 0;
      .ranking-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        cursor: pointer;
        &:last-child {
          margin-bottom: 0;
        }
        .ranking-image {
          width: 80px;
          height: 60px;
          object-fit: cover;
          border-radius: 4px;
          margin-right: 10px;
        }
        .ranking-info {
          .ranking-name {
            margin: 0;
            font-size: 14px;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .ranking-price {
            margin: 5px 0 0;
            font-size: 16px;
            color: #ff5722;
            font-weight: bold;
          }
        }
      }
    }
  }

  .marketing-card {
    padding: 0; /* 广告卡片内部不留padding */
    .marketing-image {
      width: 100%;
      border-radius: 8px 8px 0 0;
      display: block;
    }
    .marketing-image.small-image {
      height: 100px; /* 调整小图高度 */
      object-fit: cover;
    }
    .marketing-text {
      font-size: 14px;
      color: #409eff;
      text-align: center;
      padding: 10px;
      margin: 0; /* 移除默认margin */
      cursor: pointer;
    }
  }
}
</style> 